<template>
  <div id="login" >
    <div class="loginToHome">
      <h3>天赋能商城管理系统</h3>
      <el-form
              ref="form"
              :model="form"
              :rules="ruleForm"
              status-icon
              label-width="80px"
              class="loginForm"
      >
        <el-form-item
                label="用户名"
                prop="name"
        >
          <el-input
                  type="text"
                  v-model="form.name"
                  auto-complete="off"
                  placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item
                label="密码"
                prop="password"
        >
          <el-input
                  type="password"
                  v-model="form.password"
                  auto-complete="off"
                  placeholder="请输入密码"
                  @keyup.enter.native="submit"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
                  class="homeBut"
                  type="success"
                  plain
                  @click="submit"
                  :loading="logining"
          >登录</el-button>
          <el-button
                  class="loginBut"
                  type="success"
                  plain
                  @click="resetForm()"
          >重置</el-button>
        </el-form-item>
      </el-form>

    </div>
    <vue-particles
            color="#fff"
            :particleOpacity="0.7"
            :particlesNumber="60"
            shapeType="circle"
            :particleSize="4"
            linesColor="#fff"
            :linesWidth="1"
            :lineLinked="true"
            :lineOpacity="0.4"
            :linesDistance="150"
            :moveSpeed="2"
            :hoverEffect="true"
            hoverMode="grab"
            :clickEffect="true"
            clickMode="push"
            class="lizi"
    >
    </vue-particles>
  </div>
</template>
<script>
    export default {
        data() {
            return {
                logining: false,
                form: {
                    name: '',
                    password: ''
                },
                ruleForm: {
                    name: [
                        { required: true, message: '请输入账号', trigger: 'blur' },
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                    ]
                }
            }
        },
        methods: {
            submit() {
                // console.log(event);
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.logining = true;
                        this.checkForm()
                    } else {
                        console.log('error submit!');
                        return false;
                    }
                })
            },
            resetForm() {
                this.$refs.form.resetFields();

            },
            async checkForm(){
                let res = await this.$Http.login({
                    user_name:this.form.name,
                    user_pwd:this.form.password
                })
                sessionStorage.setItem('code',res.code);
                if(res.code == 200){
                    this.logining = true
                    this.$store.commit('SET_SUPPLIER_ID',res.supplier_id?res.supplier_id:"")
                    this.$store.commit('SET_SYSTEM_TYPE',res.type)
                    this.$store.commit('SET_USER_NAME',res.user_name)
                    this.$router.push({path:'/index'})
                    this.$message.success(res.log)
                }else{
                    this.logining = false;
                    this.$message.warning(res.log)
                }

            }

        }
    }
</script>
<style>
  #login{
    background-image: url("../assets/images/login_bg.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height:100%;
  }
  .loginToHome {
    position: absolute;
    left: 0px;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 400px;
    height: 260px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background: rgba(255,255,255,.4);
    border: 1px solid #dcdfe6;
  }
  h3{
    color:#008a00;
    text-shadow: 0 0 5px #fff;
    width: 100%;
    text-align: center;
  }
  .loginForm {
    text-align: center;
    padding-top: 15px;
    padding-right: 30px;
    top: 10px;
  }
  .homeBut {
    position: absolute;
    left: 0px;
    color:#008a00;
  }
  .loginBut {
    position: absolute;
    right: 0px;
  }
</style>
